<template>
  <div class="coop">
    <HeaderComponent title="联系我们" background='#ffffff' color='#000000' image_='0' size='4.8vw' />
    <div class="coop_choice">
      <!-- <p>请选择合作类型</p>
      <select v-model="cooptype">
        <option
          style="width: 80vw"
          v-for="(item, index) in selList"
          :value="item.value"
          :key="index"
        >
          {{ item.name }}
        </option>
      </select> -->
      <p>联系人姓名:</p>
      <input type="text" v-model="data.coopname" placeholder="请填写" />
      <p>联系人微信：</p>
      <input type="text" v-model="data.coopvx" placeholder="请填写" />
      <!-- <p>请在此留言</p> -->
      <textarea
        v-model="data.coopjianyi"
        placeholder="有什么想说的都可以写在这里…"
      ></textarea>
    </div>
    <div class="coop_sub" @click="subClick">提交</div>
    <p>*提交后工作人员会在1个工作日内联系你</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { indexCooperate } from '@/api/user'
import MessageBoxFun from '@/components/message_box/MessageBox'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
interface Data {
    coopname: string,
    coopvx: string,
    coopjianyi: string,
}
export default defineComponent({
  components: {
    HeaderComponent
  },
  setup () {
    const data = reactive<Data>({
        coopname: "",
        coopvx: "",
        coopjianyi: "",
    })
    const message = ref<string>('')
    const subClick: () => void = async () => {
      if (!data.coopname) {
        return MessageBoxFun({
          message: '联系人姓名不能为空',
          delay: 2000
        })
      }
      if (!data.coopvx) {
        return MessageBoxFun({
          message: '联系人微信不能为空',
          delay: 2000
        })
      }
      const dataRes = await indexCooperate({
        realname: data.coopname,
        wechat: data.coopvx,
        message: data.coopjianyi,
      })
      MessageBoxFun({
        message: dataRes.data.text,
        delay: 2000
      })
    }
    return {
      subClick,
      data,
      message
    }
  }
})
</script>

<style lang="less" scoped>
@import './CoopComponent.less';
</style>